<template>
  <div>
    <el-container>
      <el-header style="background-color: #4a4c5b;">
        <el-container style="height:100%">
          <el-aside  style="display:flex;justify-content:flex-start;align-items:center;height:100%;width:300px">
            <span style="font-size:25px;color:#fff;margin-left:20px">新职通机构端</span>
          </el-aside>
          <el-main style="display:flex;justify-content:flex-end;align-items:center;height:100%">
            <i class="iconfont icon1 pointer" style="font-size:25px;color:#fff"></i>
            <span style="font-size:20px;color:#fff;margin-right:20px" class="pointer">返回首页</span>
          </el-main>
        </el-container>
      </el-header>
      <el-main id="loginMainBox" style="padding-top: 20px;" class="imgCol">
        <el-card style="width:500px;height:600px">
          <el-scrollbar style="height:600px">
            <el-steps :active="activeStep" align-center>
              <el-step title="填写基本信息"></el-step>
              <el-step title="前往邮箱激活"></el-step>
              <el-step title="完善机构资料"></el-step>
            </el-steps>
            <div style="margin-top:40px" class="imgCol">
              <div style="width:400px">
                <el-form :model="form" status-icon :rules="rules" ref="form">
                  <el-form-item prop="logo" label="企业logo" label-width="100px">
                    <el-row>
                      <el-upload
                        class="qiYeLogo"
                        :before-upload="beforeAvatarUpload"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :http-request="handleLogoSucess"
                      >
                        <img v-if="form.logo" :src="form.logo" class="qiYeLogo" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-row>
                  </el-form-item>
                  <div style="margin-bottom:20px">
                    <el-alert title="企业LOGO将作为您的头像" type="info" :closable="false"></el-alert>
                  </div>
                  <el-form-item prop="allName" label="企业全称" label-width="100px">
                    <el-input placeholder="请填写企业全称" v-model="form.allName"></el-input>
                  </el-form-item>
                  <el-form-item prop="shortName" label="企业简称" label-width="100px">
                    <el-input placeholder="请填写企业简称（5个字符以内）" v-model="form.shortName"></el-input>
                  </el-form-item>
                  <!-- <el-form-item prop="type" label="企业类型" label-width="100px">
                                    <el-select  v-model="form.type" placeholder="请选择">
                                            <el-option
                                                v-for="item in types"
                                                :key="item"
                                                :label="types[item]"
                                                :value="item">
                                            </el-option>
                                    </el-select>
                                    </el-form-item>
                                    <el-form-item  prop="industry" label="所属行业" label-width="100px">
                                        <el-select  v-model="form.industry" placeholder="请选择">
                                            <el-option
                                                v-for="item in industrys"
                                                :key="item"
                                                :label="industrys[item]"
                                                :value="item">
                                            </el-option>
                                    </el-select>
                  </el-form-item>-->
                  <el-form-item prop="birthday" label="成立时间" label-width="100px">
                    <el-date-picker
                      :picker-options="pickerOptions"
                      v-model="form.birthday"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                      @change="checkDate"
                    ></el-date-picker>
                  </el-form-item>
                  <!-- <el-form-item  prop="scale" label="企业规模" label-width="100px">
                                    <el-input-number v-model="form.scale"  :min="1"></el-input-number>
                  </el-form-item>-->
                  <el-form-item prop="area" label="所在地区" label-width="100px">
                    <el-cascader v-model="form.pca" :options="regionDataPlus" @change="pcaChange"></el-cascader>
                  </el-form-item>
                  <el-form-item prop="address" label="详细地址" label-width="100px">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请填写准确地址，便于系统导航至您的企业"
                      v-model="form.address"
                    ></el-input>
                  </el-form-item>
                  <el-form-item prop="contact" label="联系方式" label-width="100px">
                    <el-input placeholder="请输入联系方式" v-model="form.contact"></el-input>
                  </el-form-item>
                  <el-form-item prop="intro" label="企业简介" label-width="100px">
                    <el-input
                      type="textarea"
                      :rows="2"
                      placeholder="请填写企业简介（主要业务、愿景等）"
                      v-model="form.intro"
                    ></el-input>
                  </el-form-item>
                  <el-form-item prop="qiYePic1" label="企业照片" label-width="100px">
                    <el-row style="position:static">
                      <!-- <div style="position:absolute;top:0px;left:0px"> -->
                      <!-- <el-upload
                                                class="qiYeLogo" 
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                :on-preview="handlePictureCardPreview"
                                                :on-remove="handleRemove">
                                                <i class="el-icon-plus avatar-uploader-icon" ></i>
                                            </el-upload>
                                            <el-dialog :visible.sync="form.dialogVisible">
                                                <img width="100%" :src="form.qiYePics" alt=""  class="qiYeLogo" >
                      </el-dialog>-->
                      <el-upload
                        class="qiYeLogo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :http-request="handlePics1Sucess"
                        :before-upload="beforeAvatarUpload"
                      >
                        <img v-if="form.qiYePic1" :src="form.qiYePic1" class="qiYeLogo" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                      <!-- </div> -->
                      <div style="position:absolute;top:0px;left:90px">
                        <el-upload
                          class="qiYeLogo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :http-request="handlePics2Sucess"
                          :before-upload="beforeAvatarUpload"
                        >
                          <img v-if="form.qiYePic2" :src="form.qiYePic2" class="qiYeLogo" />
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                      <div style="position:absolute;top:0px;left:180px">
                        <el-upload
                          class="qiYeLogo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          :http-request="handlePics3Sucess"
                          :before-upload="beforeAvatarUpload"
                        >
                          <img v-if="form.qiYePic3" :src="form.qiYePic3" class="qiYeLogo" />
                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                      </div>
                    </el-row>
                  </el-form-item>
                </el-form>
                <div style="margin-top:0px;margin-bottom:20px">
                  <el-alert title="请上传1~3张企业外景图片" type="info" :closable="false"></el-alert>
                </div>
                <el-row style="margin-bottom:20px">
                  <button class="btnSubmit pointer" @click="submitAll" style="width:400px">完成</button>
                </el-row>
              </div>
            </div>
          </el-scrollbar>
        </el-card>
      </el-main>
      <el-footer
        style="text-align: center;width: 100%;white-space: nowrap;color: #A7A7A7;font-size: 10px;line-height: 60px;"
      >
        <div>www. xinzhitong. com版权所有新职通一新时期务工人员转 型升级助推者备案号粤ICP备10054973号-5</div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import {
  regionDataPlus,
  CodeToText,
  TextToCode
} from "element-china-area-data";
export default {
  data() {
    //校验简称
    var validateShortName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入企业简称"));
      } else if (value.length > 5) {
        console.log(value);
        callback(new Error("请将企业简称控制在5个字符以内"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      var pattern = /^1[34578]\d{9}$/;
      if (value === "") {
        callback(new Error("请输入联系方式"));
      } else if (value.length !== 11 || !pattern.test(value)) {
        callback(new Error("手机格式不正确"));
      } else {
        callback();
      }
    };
    return {
      activeStep: 3,
      form: {
        logo: "",
        logoFile: "",
        allName: "",
        shortName: "",
        type: "",
        industry: "",
        birthday: "",
        scale: 10,
        province: "",
        city: "",
        area: "",
        //省市区
        pca: "",
        address: "",
        contact: "",
        intro: "",
        dialogVisible: false,
        qiYePic1: "",
        qiYePic2: "",
        qiYePic3: "",
        qiYePics: []
      },
      rules: {
        logo: [
          {
            required: true,
            message: "请上传logo",
            trigger: "blur"
          }
        ],
        allName: [
          {
            required: true,
            message: "请输入企业全称",
            trigger: "blur"
          }
        ],
        shortName: [
          // {
          //      required: true,message: '请输入企业简称', trigger: 'blur'
          // },
          {
            validator: validateShortName,
            trigger: "blur"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择企业类型",
            trigger: "blur"
          }
        ],
        industry: [
          {
            required: true,
            message: "请选择企业行业",
            trigger: "blur"
          }
        ],
        birthday: [
          {
            required: true,
            message: "请选择成立时间",
            trigger: "blur"
          }
        ],
        scale: [
          {
            required: true,
            message: "请输入企业规模",
            trigger: "blur"
          }
        ],
        area: [
          {
            required: true,
            message: "请选择所在地区",
            trigger: "blur"
          }
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur"
          }
        ],
        contact: [
          // {
          //      required: true,message: '请输入联系方式', trigger: 'blur'
          // },
          {
            validator: validatePhone,
            trigger: "blur"
          }
        ],
        intro: [
          {
            required: true,
            message: "请输入企业简介",
            trigger: "blur"
          }
        ],
        qiYePic1: [
          {
            required: true,
            message: "请至少上传一张企业外景图片",
            trigger: "blur"
          }
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          //console.log("endDatePicker:",time);
          return time.getTime() > Date.now() - 8.64e7;
        }
      },
      types: [],
      industrys: [],
      regionDataPlus: regionDataPlus
    };
  },
  watch: {},
  mounted() {
    // this.getQiYeType();
    // this.getIndustrys();

    var body = document.getElementById("loginMainBox");
    console.log(body);
    var height = document.documentElement.clientHeight - 120;
    console.log(height.toString() + "px");
    if (height <= 700) height = 700;
    body.style.height = height.toString() + "px";
    console.log(body.style.height);
  },
  methods: {
    checkDate() {
      console.log(this.form.birthday);
    },
    //提交企业信息
    submitAll() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          var URL = this.IP + "/organUserInfo/createTrainOrganInfo";
          var form = new FormData();

          form.append("logo", this.form.logoFile);
          form.append("name", this.form.allName);
          form.append("shortname", this.form.shortName);
          //  form.append('nature',this.form.type);
          //  form.append('industry',this.form.industry);
          form.append("date", this.form.birthday);
          // form.append('scale',this.form.scale);
          form.append("province", this.form.province);
          form.append("city", this.form.city);
          form.append("area", this.form.area);
          form.append("address", this.form.address);
          form.append("contact", this.form.contact);
          form.append("introduction", this.form.intro);
          // form.append('pictures',this.form.qiYePics);
          var i = 0;
          for (i in this.form.qiYePics) {
            form.append("pictures", this.form.qiYePics[i]);
          }
          var params = {
            logo: this.form.logoFile,
            name: this.form.allName,
            shortname: this.form.shortName,
            //nature:this.form.type,
            //industry:this.form.industry,
            date: this.form.birthday,
            //scale:this.form.scale,
            province: this.form.province,
            city: this.form.city,
            area: this.form.area,
            address: this.form.address,
            contact: this.form.contact,
            introduction: this.form.intro,
            pictures: this.form.qiYePics
          };
          console.log(URL);
          console.log(params);
          console.log(form);
          this.$message({
            type: "warning",
            message: "正在上传信息， 请耐心等待结果！"
          });
          this.$ajax({
            method: "put",
            url: URL,
            data: form,
            headers: {
              "Content-type": "multipart/form-data"
            }
          })
            .then(response => {
              console.log(response.data);
              var code = response.data.code;
              if (code == 0) {
                this.$message({
                  message: response.data.data,
                  type: "success"
                });
                this.$router.push({
                  path: "/home/recent"
                });
              } else {
                console.log(response.data.msg);
                this.$message.error(response.data.msg);
              }
            })
            .catch(error => {
              console.log(error);
              //Toast(error);
            });
        } else {
          console.log("error submit!!");
        }
      });
    },
    //获取企业logo的回调
    handleLogoSucess(file) {
      this.form.logo = URL.createObjectURL(file.file);
      this.form.logoFile = file.file;
      // console.log(res);
      console.log(file);
    },
    //获取企业外景图1
    handlePics1Sucess(file) {
      this.form.qiYePic1 = URL.createObjectURL(file.file);
      this.form.qiYePics[0] = file.file;
      console.log(this.form.qiYePics);
    },
    //获取企业外景图2
    handlePics2Sucess(file) {
      this.form.qiYePic2 = URL.createObjectURL(file.file);
      this.form.qiYePics[1] = file.file;
      console.log(this.form.qiYePics);
    },
    //获取企业外景图3
    handlePics3Sucess(file) {
      this.form.qiYePic3 = URL.createObjectURL(file.file);
      this.form.qiYePics[2] = file.file;
      console.log(this.form.qiYePics);
    },
    //获取企业类型
    getQiYeType() {
      var URL = this.IP + "/company/companyTypes";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.types = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //获取所属行业
    getIndustrys() {
      var URL = this.IP + "/company/industry";
      console.log(URL);
      this.$ajax({
        method: "get",
        url: URL
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.industrys = response.data.data;
          } else {
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    //省市区选择变化触发
    pcaChange(val) {
      console.log(val);
      var proCode = val[0];
      var cityCode = val[1];
      var areaCode = val[2];
      this.form.province = CodeToText[proCode];
      this.form.city = CodeToText[cityCode];
      this.form.area = CodeToText[areaCode];
      console.log(this.form.province);
      console.log(this.form.city);
      console.log(this.form.area);
    },
    beforeAvatarUpload(file) {
      console.log("图片大小：", file.size);
      console.log("文件类型：", file.type);
      const isJPG = file.type;
      const isLt2M = file.size / (1024 * 1024);
      if (isJPG !== "image/jpeg" && isJPG !== "image/png") {
        //非图片类型判断
        this.$message.error("上传文件类型必须是图片！");
        return false;
      }
      if (isLt2M > 4) {
        this.$message.error("上传头像图片大小不能超过 4MB!");
        return false;
      } else if (isLt2M > 1) {
        this.$message({
          message: "图片有点大，若上传请耐心等待",
          type: "warning"
        });
        return true;
      } else {
        return true;
      }
    }
  }
};
</script>
<style>
.el-main,
.el-header,
.el-footer,
.el-aside {
  padding: 0px;
}
#loginMainBox {
  background-image: url(../../assets/login/loginbgi.jpg);
  background-size: cover;
}
.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
.plainWords {
  color: rgb(105, 110, 125);
}
.pointer {
  cursor: pointer;
}
.qiYeLogo {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 80px;
  width: 80px;
  white-space: nowrap;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  white-space: nowrap;
}
/* .el-upload--picture-card{
    width: 80px;
    height: 80px;
    line-height: 80px;
  } */
.btnSubmit {
  width: 400px;
  height: 40px;
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  border-style: none;
  border-radius: 5px;
}
</style>